<template>
	<view class="homepageCell-view">
		<view class="homepageCell-left-view">
			<view class="homepageCell-left-top-view">
				{{title1}}
			</view>
			<view class="homepageCell-left-bottom-view">
				{{value1}}
			</view>
		</view>
		<view class="homepageCell-right-view">
			<view class="homepageCell-right-top-view">
				{{title2}}
			</view>
			<view class="homepageCell-right-bottom-view">
				{{value2}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title1: {
				type: String,
				default: ''
			},
			value1: {
				default: ''
			},
			title2: {
				type: String,
				default: ''
			},
			value2: {
				default: ''
			}
		}
	}
</script>

<style lang="scss">
	.homepageCell-view {
		display: flex;
		
		.homepageCell-left-view {
			width: 55%;
			display: flex;
			flex-direction: column;
			align-items: baseline;
			justify-content: center;
			
			.homepageCell-left-top-view {
				color: #999999;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				border-right: 1rpx solid #979797;
			}
			
			.homepageCell-left-bottom-view {
				color: #000000;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 38rpx;
				font-weight: bold;
				border-right: 1rpx solid #979797;
			}
		}
		
		.homepageCell-right-view {
			padding-left: 55rpx;
			width: 45%;
			display: flex;
			flex-direction: column;
			align-items: baseline;
			justify-content: center;
			
			.homepageCell-right-top-view {
				color: #999999;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.homepageCell-right-bottom-view {
				color: #000000;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 38rpx;
				font-weight: bold;
			}
		}
	}
</style>
